import React from 'react';
import { Modal, Form, Input, InputNumber, Upload, notification, Button, } from 'antd';
import request from '../../utils/request';

import config from '@/config/config';

const FormItem = Form.Item;
const { TextArea } = Input

const CreateUserForm = Form.create()(props => {
  const { visible, form, handleModalVisible } = props;
  const { getFieldDecorator } = form
  const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, }, };

  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      request(`${config.prefix}/setUser`, {
        method: 'POST',
        body: { ...fieldsValue, source: 'home' },
      }).then((response = {}) => {
        const { code = -1, msg = '提交不成功' } = response;
        if (code) {
          console.log(111)
          notification.error({ message: '操作提示', description: msg })
        } else {
          console.log(-111)
          notification.success({ message: '操作提示', description: `个人信息提交成功` })
          handleModalVisible()
          form.resetFields();
        }
      })
    });
  }

  return (
    <Modal
      destroyOnClose
      visible={visible}
      title="个人信息提交"
      footer={null}
      onCancel={() => handleModalVisible()}
      className="model-wraper"
    >
      <Form onSubmit={handleSubmit}>
        <p style={{ marginBottom: 25, textAlign: 'justify' }}>我们需要您一些个人信息，以便更好的通过审核，节省您宝贵的时间与经历，
我们的工作人员会在您提交信息后的24小时内联系您。</p>
        <FormItem
          {...formItemLayout}
          label="姓名"
        >
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: '请输入您的姓名!' }],
          })(
            <Input placeholder="请输入您的姓名" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="电话"
        >
          {getFieldDecorator('phone', {
            rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入您的电话!' }],
          })(
            <Input placeholder="请输入您的电话" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="驾照年限"
        >
          {getFieldDecorator('licenseYear', {
            rules: [{ required: true, message: '请输入您的驾照年限!' }],
          })(
            <InputNumber min={0} max={20} placeholder="请输入您的驾照年限" style={{ width: '100%' }} />
          )}
        </FormItem>
        <div className="button-wraper">
          <Button htmlType="submit" className="button">提交</Button>
        </div>
      </Form>
    </Modal>
  );
});

const CreateReportForm = Form.create()(props => {
  const { visible, form, handleModalVisible } = props;
  const { getFieldDecorator } = form
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
  const uploadProps = {
    name: 'accessory',
    action: `${config.prefix}/setFile`,
    headers: {
      authorization: 'authorization-text',
    },
    // accept: ['.gif', '.jpg', '.png', '.jpeg', '.bmp', '.doc', '.ppt', '.xis', '.xisx', '.docx', '.docx', '.pptx', '.zip', '.rar', '.pdf'],
    showUploadList: false,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        if (info.file.response.code) {
          notification.error({ message: '操作提示', description: `${info.file.response.msg}` })
        } else {
          notification.success({ message: '操作提示', description: `${info.file.name} 文件上传成功` })
        }
      } else if (info.file.status === 'error') {
        notification.error({ message: '操作提示', description: `${info.file.name} 文件上传失败` })
      }
    },
  };
  const getCaptcha = e => {
    e.preventDefault()
    const value = form.getFieldValue('phone')
    if (!/^1[34578]\d{9}$/.test(value)) return notification.error({ message: '操作提示', description: '手机号不正确' })
    request(`${config.prefix}/getPhoneCode`, {
      method: 'POST',
      body: { phone: value, },
    }).then((response = {}) => {
      const { code = -1, msg = '提交不成功' } = response
      if (code) {
        notification.error({ message: '操作提示', description: msg })
      } else {
        notification.success({ message: '操作提示', description: `${value} 短信验证码发送成功` })
      }
    })
  }

  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      request(`${config.prefix}/setReport`, {
        method: 'POST',
        body: { ...fieldsValue, source: 'home' },
      }).then((response = {}) => {
        const { code = -1, msg = '提交不成功' } = response
        if (code) {
          notification.error({ message: '操作提示', description: msg })
        } else {
          notification.success({ message: '操作提示', description: `举报信息提交成功` })
          handleModalVisible()
          form.resetFields();
        }
      })
    });
  }

  return (
    <Modal
      destroyOnClose
      visible={visible}
      footer={null}
      onCancel={() => handleModalVisible()}
      className="model-wraper"
    >
      <Form onSubmit={handleSubmit}>
        <h3 className="title">举报信息填写</h3>
        <FormItem
          {...formItemLayout}
          label="举报对象"
        >
          {getFieldDecorator('targetName', {
            rules: [{ required: true, message: '请输入举报对象的姓名!' }],
          })(
            <Input placeholder="请输入举报对象的姓名" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="举报主题"
        >
          {getFieldDecorator('title', {
            rules: [{ required: true, message: '请输入举报主题!' }],
          })(
            <Input placeholder="请输入举报主题" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="举报内容"
        >
          {getFieldDecorator('content', {
            rules: [{ required: true, message: '请输入举报内容!' }],
          })(
            <TextArea placeholder="请输入举报内容" autosize />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="举报内容"
        >
          <Upload {...uploadProps}>
            <a>选择附件</a>
          </Upload>
          <>
            <p style={{ lineHeight: 1.2, textAlign: 'justify' }}>（附件最大为20M，可上传格式gif、jpg、png、jpeg、bmp、doc、ppt、xis、xisx、docx、docx、pptx、zip、rar、pdf、）</p>
          </>
        </FormItem>
        <h3 className="title">举报人信息</h3>
        <FormItem
          {...formItemLayout}
          label="姓名"
        >
          {getFieldDecorator('sourceName', {
            rules: [{ required: true, message: '请输入您的姓名!' }],
          })(
            <Input placeholder="请输入您的姓名" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="电话"
        >
          {getFieldDecorator('phone', {
            rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入您的电话!' }],
          })(
            <Input placeholder="请输入您的电话" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="邮箱"
        >
          {getFieldDecorator('email', {
            rules: [{ type: 'email', required: true, message: '请输入您的邮箱!' }],
          })(
            <Input placeholder="请输入您的邮箱" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="验证码"
        >
          <section className="captcha">
            {getFieldDecorator('captcha', {
              rules: [{ required: true, pattern: /^\d{6}$/, message: '请输入您的验证码!' }],
            })(
              <Input placeholder="请输入您的验证码" />
            )}
            <button type="button" onClick={getCaptcha}>获取验证码</button>
          </section>
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="其他联系方式"
        >
          {getFieldDecorator('otherContact', {
            rules: [{ required: true, message: '请输入您的联系方式!' }],
          })(
            <Input placeholder="请输入您的联系方式" />
          )}
        </FormItem>
        <div className="button-wraper">
          <Button htmlType="submit" className="button">提交</Button>
        </div>
      </Form>
    </Modal>
  );
});

const CreateModel = ({ visible, handleModalVisible }) => {
  return <Modal
    destroyOnClose
    visible={visible}
    title="廉政举报须知"
    footer={null}
    onCancel={handleModalVisible}
    className="model-wraper"
  >
    <p style={{ marginBottom: 8, color: '#999' }}>我们致力于打造公开、透明、开放的新商业文明，我们对于任何腐败的行为将予以坚决打击。</p>
    <p style={{ marginBottom: 16, color: '#999' }}>我们受理以下涉及员工违纪的举报：</p>
    <p>（1）索取、收受贿赂；违规收受礼品或款待；</p>
    <p>（2）违规投资、就职于阿里巴巴供应商、商家、合作伙伴等；</p>
    <p>（3）泄露公司保密信息等；</p>
    <p>（4）利用职权谋取私利；</p>
    <p>（5）其他违反法律法规的行为。</p>
    <p style={{ marginTop: 16, marginBottom: 16, color: '#999' }}>我们只受理廉正举报（内部员工违纪）。我们希望您采取实名举报，我们承诺会严格保护举报人，
    并对举报内容严格保密。举报内容必须客观真实。对于立案调查并有结论的举报，我们会根据您留
下的联系方式进行反馈。</p>
    {/* <div className="button-wraper" style={{marginTop: 32}}>
      <Button htmlType="submit" className="button" onClick={handleModalVisible} style={{ padding: '10px 50px' }}>员工违纪举报</Button>
      <Button htmlType="submit" className="button" onClick={handleModalVisible} style={{ padding: '10px 50px' }}>其他业务投诉</Button>
    </div> */}
  </Modal>
}

export default class extends React.PureComponent {
  render() {

    const { visibleType } = this.props

    if (visibleType === 0) return <CreateUserForm {...this.props} />

    if (visibleType === 1) return <CreateModel  {...this.props} />

    if (visibleType === 2) return <CreateReportForm {...this.props} />

  }
}